import { NavigationContainer } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, ImageBackground, FlatList, TouchableOpacity, TextInput } from 'react-native';
import '../global.js'

const list = [
  { backgroundColor: '#fcc', title: '居家维修保养', src: require('../images/a.png') },
  { backgroundColor: '#ffe1b1', title: '住宿优惠', src: require('../images/b.png') },
  { backgroundColor: '#bfe6a8', title: '出行接送', src: require('../images/c.png') },
  { backgroundColor: '#c3ddf2', title: 'E族活动', src: require('../images/d.png') }
]
const Home=({navigation})=> {
  return (
    <View style={styles.container}>

      {/**顶部 */}
      <View style={styles.header}>
        {/* *顶部第一层 */}
        <View style={styles.header_first}>
        </View>
        {/**顶部第二层 */}
        <View style={styles.header_second}>
          <View>
            <ImageBackground source={require('../images/searchbg.png')} style={{ width: width(522), height: height(46), flexDirection: 'row' }}>
              <View style={[styles.hvcenter, { width: '15%' }]}>
                <Image source={require('../images/search.png')} style={{ width: width(31), height: height(31) }} />
              </View>
              {/**搜索框 */}
              <View style={styles.hvcenter}>
                <TextInput
                  placeholderTextColor='white'
                  style={{ fontSize: 12, color: '#fff' }}
                  placeholder='请输入您要搜索的关键字'
                />
              </View>
            </ImageBackground>
          </View>
          <Image source={require('../images/shop.png')} style={{ width: width(36), height: height(35) }} />
        </View>
      </View>
      {/**banner图 */}
      <View><Image style={styles.banner} source={require('../images/banner.png')} /></View>
      {/**列表区 */}
      <View>
        <FlatList
          data={list}
          renderItem={({ item }) => {
            return <View style={{ flex: 1, marginTop: height(10), width: width(640), backgroundColor: '#fff', alignItems: 'center' }}>
              <View style={styles.li}>
                <View style={{ width: width(135), justifyContent: 'center' }}>
                  <View style={[styles.li_picture_bg, { backgroundColor: item.backgroundColor }]}>
                    <Image source={item.src} style={styles.li_picture} />
                  </View>
                </View>
                <View style={styles.hvcenter}>
                  <Text 
                  style={{ width: width(422), color: '#333' }}
                  onPress={()=>{
                    navigation.navigate('Efamily');
                  }}>{item.title}</Text>
                </View>
                <View style={styles.hvcenter}>
                  <Image source={require('../images/next.png')} />
                </View>
              </View>
            </View>
          }}
          keyExtractor={item => item.title}
        />
      </View>
      {/**底部 */}
      <View style={styles.hvcenter}>
        <TouchableOpacity style={styles.btn}>
          <Text style={styles.white_font}>发布需求</Text>
        </TouchableOpacity>
      </View>
      <View style={[styles.hvcenter, { width: width(640), marginTop: height(60) }]}>
        <Text style={{ color: '#767676', fontSize: 10 }}>@E族之家&nbsp;&nbsp;&nbsp;&nbsp;版权所有</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eee',
    width: width(640),
    height: height(1186)
  },
  hvcenter: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  white_font: {
    color: 'white',
  },
  header: {
    width: '100%',
    height: height(109),
    backgroundColor: '#f23030',
    alignItems: 'center',
  },
  header_signal1: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '30%'
  },
  header_signal2: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    width: '30%'
  },
  header_first: {
    // flex: 1,
    // width: '95%',
    // flexDirection: 'row',
    height: height(30)
  },
  header_second: {
    height: height(79),
    width: '95%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  banner: {
    width: width(640),
    height: height(273)
  },
  li: {
    width: width(590),
    height: height(124),
    flexDirection: 'row'
  },
  li_picture_bg: {
    width: width(100),
    height: height(100),
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: width(50)
  },
  li_picture: {
    width: width(50),
    height: height(50)
  },
  btn: {
    height: height(70),
    width: width(544),
    backgroundColor: '#f23030',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: height(40),
    borderRadius: 8
  }
});
export default Home;